<template>
  <div
    v-if="!formulaPower.length && !spotStrategy.length"
    style="
      width: 100%;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
    "
  >
    <a-empty style="opacity: 0.5" />
  </div>
  <div class="strategy-chart" v-else>
    <div
      ref="strategyChart"
      id="strategyChart"
      class="chrat"
      style="width: 100%; height: 600px"
    ></div>
  </div>
</template>
<script setup>
// 
import * as echarts from "echarts"
import { chartOption } from "./Strategy.js"
import { cloneDeep } from "lodash-es"
import moment from "moment"
const $api = inject("$api")
const props = defineProps({
  /* data: {
    type: Object,
    default: () => ({
      standardData: [],
      actualData: [],
    }),
  }, */
  formulaPower: {
    type: Array,
    default: () => [],
  },
  spotStrategy: {
    type: Array,
    default: () => [],
  },
})
let chart = null
const formulaPower = ref([])
const spotStrategy = ref([])
const initChart = async () => {
  await nextTick()
  const chartEl = document.getElementById("strategyChart")
  if (!chartEl) return
  const option = cloneDeep(chartOption)
  // 设置数据

  const baseDate = moment().format("YYYY-MM-DD")
  option.series[0].data = formulaPower.value.map((item) => {
    item.chartEnd = item.endTime
    if (item.startTime !== "00:00" && item.end === "00:00") {
      item.chartEnd = "23:59:59"
    }
    let { startTime, endTime, power, chartEnd } = item
    return {
      value: [
        `${baseDate} ${startTime}`,
        `${baseDate} ${chartEnd}`,
        power,
        item,
      ],
    }
  })

  // 对 spotStrategy.value 按照 startTime 从早到晚排序
  spotStrategy.value.sort((a, b) => {
    return moment(`${baseDate} ${a.startTime}`).diff(
      moment(`${baseDate} ${b.startTime}`)
    )
  })

  // 合并相邻且power相同的数据
  const mergedSpotStrategy = []
  if (spotStrategy.value.length > 0) {
    let currentItem = { ...spotStrategy.value[0] }

    for (let i = 1; i < spotStrategy.value.length; i++) {
      const nextItem = spotStrategy.value[i]

      // 如果当前项与下一项的power相同，且时间相连
      if (
        currentItem.power === nextItem.power &&
        currentItem.endTime === nextItem.startTime
      ) {
        // 更新当前项的结束时间为下一项的结束时间
        currentItem.endTime = nextItem.endTime
        currentItem.chartEnd = nextItem.endTime
      } else {
        // 如果不相同或不相连，将当前项添加到结果数组，并将下一项设为当前项
        mergedSpotStrategy.push({ ...currentItem })
        currentItem = { ...nextItem }
      }
    }

    // 添加最后一项
    mergedSpotStrategy.push({ ...currentItem })
  }

  option.series[1].data = mergedSpotStrategy.map((item) => {
    item.chartEnd = item.endTime
    if (item.startTime !== "00:00" && item.end === "00:00") {
      item.chartEnd = "23:59:59"
    }
    let { startTime, endTime, power, chartEnd } = item
    return {
      value: [
        `${baseDate} ${startTime}`,
        `${baseDate} ${chartEnd}`,
        power,
        item,
      ],
    }
  })

  //option.series[1].data = props.data.actualData
  chart = echarts.init(chartEl)
  chart.resize()
  chart.clear()
  chart.setOption(option)
}
watch(
  () => [props.formulaPower, props.spotStrategy],
  async ([val, val2]) => {
    if (val.length || val2.length) {
      formulaPower.value = val
      spotStrategy.value = val2
      await nextTick()
      initChart()
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  initChart()
  window.addEventListener("resize", () => {
    chart && chart.resize()
  })
})
onUnmounted(() => {
  chart && chart.dispose()
  window.removeEventListener("resize", () => {
    chart && chart.resize()
  })
})
</script>
<style lang="less" scoped>
.strategy-chart {
  width: 100%;
  height: 600px;
  box-sizing: border-box;
}
</style>
